@import "../../sass/themes/base";
@import "../../sass/themes/date";

@import "../../sass/mixins/base";
@import "../../sass/mixins/form";
@import "../../sass/mixins/icon";
@import "../../sass/mixins/button";
@import "../../sass/mixins/compatible";

$datepicker-prefix: #{'.' + $css-prefix+ 'datepicker-'};

#{$datepicker-prefix}wrap{
  @include clearfix();
  position: relative;
  #{$datepicker-prefix}input-wrap{
    position: relative;
    #{$datepicker-prefix}input{
      @include input();
      padding: 0 $datepicker-icon-width+10 0 10px;
      background-color: #fff;
      width: 100%;
    }
    .icon-calendar{
      @include iconfont-code('\e639');
      cursor: pointer;
      position: absolute;
      right: 1px;
      top: 1px;
      bottom: 1px;
      width: $datepicker-icon-width;
      text-align: center;
      line-height: $form-input-height - 2;
      background-color: $datepicker-icon-bg-color;
      border-left: 1px solid $form-border-color;
      border-top-right-radius: $form-border-radius - 1;
      border-bottom-right-radius: $form-border-radius - 1;
      color: $datepicker-icon-color;
    }
    .icon-close{
      @include iconfont-code('\e6d6');
      cursor: pointer;
      position: absolute;
      top: 1px;
      bottom: 1px;
      right: $datepicker-icon-width + 1;
      width: $datepicker-icon-width;
      text-align: center;
      line-height: 28px;
      color: #666;
      display: none;
      background-color: #fff;
    }

    &:hover{
      .icon-close{
        display: block;
      }
    }
  }

  .date-wrap{
    width: $datepicker-date-wrap-width;
    border-bottom: 1px solid #eee;
    #{$datepicker-prefix}date{
      position: relative;
      text-align: center;
      padding: 10px $datepicker-date-wrap-padding;
      input{
        @include input();
        width: 100%;
        text-align: center;
      }
    }
    #{$datepicker-prefix}time-wrap{
      @include clearfix();
      padding: 0 $datepicker-date-wrap-padding 10px;
      select{
        @include input();
        width: 30%;
        float: left;
      }
      span{
        float: left;
        width: 5%;
        text-align: center;
        line-height: $form-input-height;
      }
    }
    #{$datepicker-prefix}month-wrap{
      @include clearfix();
      position: relative;
      height: 30px;
      font-size: 12px;
      line-height: 24px;
      border-top: 1px solid #eee;
      padding-top: 5px;
      text-align: center;
      #{$datepicker-prefix}prev-month,
      #{$datepicker-prefix}next-month{
        position: absolute;
        top: 50%;
        margin-top: -10px;
        font-size: 12px;
        cursor: pointer;
        &.disable-month{
          color: #cecece;
          cursor: not-allowed;
        }
      }
      #{$datepicker-prefix}prev-month{
        @include iconfont-code('\e68b');
        left: $datepicker-date-wrap-padding;
      }
      #{$datepicker-prefix}next-month{
        @include iconfont-code('\e688');
        right: $datepicker-date-wrap-padding;
      }
    }
  }

  .weekdays-list,
  .date-list{
    @include clearfix();
    width: $datepicker-date-wrap-width;
    padding: $datepicker-date-wrap-padding;
    .date-item{
      list-style: none;
      float: left;
      width: $datepicker-date-item-width;
      height: $datepicker-date-item-height;
      line-height: $datepicker-date-item-height;
      text-align: center;
      font-size: 12px;
      cursor: pointer;
      &.weekdays{
        color: #666;
        background-color: #ecf4ff;
        cursor: default;
      }
      &.other-month-day{
        color: #999;
      }
      &.selected-day{
        line-height: $datepicker-date-item-height - 6;
        padding: 3px;
        span{
          float: left;
          width: 100%;
          background-color: $datepicker-current-bg-color;
          color: $datepicker-current-color;
          border-radius: 100%;
        }
      }
      &.disable-day{
        color: #cecece;
        cursor: not-allowed;
        text-decoration: line-through;
      }
    }
  }

  #{$datepicker-prefix}button-wrap{
    text-align: center;
    padding: 10px;
    #{$datepicker-prefix}apply,
    #{$datepicker-prefix}cancel{
      margin: 0 5px;
    }
    #{$datepicker-prefix}apply{
      @include button($button-primary-background-color, $button-primary-color, $button-primary-border-color);
    }
    #{$datepicker-prefix}cancel{
      @include button($button-ghost-background-color, $button-ghost-color, $button-ghost-border-color)
    }
  }

  #{$datepicker-prefix}single-wrap,
  #{$datepicker-prefix}range-wrap{
    position: absolute;
    top: 30px;
    z-index: -1;
    border: 1px solid #c9c9c9;
    border-radius: $border-radius / 2;
    background-color: #fff;
    opacity: 0;
    @include transform(translate(-25%, 0));
    @include transition(all .3s ease-out);
    &#{$datepicker-prefix}active{
      z-index: 1000;
      opacity: 1;
      @include transform(translate(0, 0));
    }
  }

  #{$datepicker-prefix}single-wrap{
  }

  #{$datepicker-prefix}range-wrap{
    width: $datepicker-date-wrap-width * 2 + 10;
    .date-wrap{
      &:first-child{
        float: left;
      }
      &:last-child{
        float: right;
      }
    }
  }
}